<template>
    <div class="video_big poa">
        <Loading v-if="!video_list.length" />
        <div v-else class="video_content">
            <div @click="search_user" class="video_search_content">
                <div class="video_search_yaun"></div>
                <div class="video_search_shu"></div>
            </div>
            <list_vue :list="video_list" :btmflag="true"/>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, defineAsyncComponent } from 'vue';
import Loading from '../common/lazy_loading.vue'
import { video } from '../../api/api.js'
import { useRouter } from 'vue-router';
const router = useRouter()
const list_vue = defineAsyncComponent(() => import('../common/video_list.vue'))
let video_list = reactive(
    []
)
async function videofn() {
    return await video().then()
}
function search_user() {
    if (localStorage.getItem('user')) {
        router.push('/search_user')
    } else {
        router.push('/user_page')
    }
}
function getvideo() {
    videofn().then(res => {
        if (res) {
            res.data.data.forEach(item => {
                if (JSON.parse(item).Video) {
                    video_list.push(JSON.parse(item))
                }
            })
        } else {
            getvideo()
        }
    })
}
getvideo()
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.reset {
    color: #fff;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    height: r(25);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: r(16);

    .hr {
        position: absolute;
        width: r(3);
        left: 50%;
        bottom: 200%;
        transform: translateX(-50%);
        background-color: #fff;
    }
}

.video_big {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;

    .video_content {
        width: 100%;
        height: 100%;

        .video_move {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: top 1s;

            .video_list {
                height: 100vh;
                width: 100%;
                background-color: #000;
                position: relative;
                color: #fff;

                .lsit_right {
                    position: absolute;
                    right: r(15);
                    bottom: r(110);
                    height: r(270);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    z-index: 2;
                }
            }
        }
    }
}

.content_cont {
    width: 100%;
    max-height: r(420);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.video_title {
    position: absolute;
    bottom: r(70);
    width: 70%;

    .video_title_top {
        width: 100%;
        word-wrap: normal;
        font-size: r(16);
        color: #fff;
        margin-bottom: r(10);
    }

    .video_title_btm {
        font-size: r(14);
    }
}

.number {
    position: absolute;
    bottom: r(-25);
    color: #fff;
    font-size: r(12);
    width: 100%;
    text-align: center;
}

.video_share {
    width: r(40);
    height: r(40);
    position: relative;

    .s1 {
        width: r(12);
        height: r(3);
        background-color: #fff;
        position: absolute;
        top: r(10);
        left: 50%;
        transform-origin: right center;
        transform: translateX(-50%) rotate(-30deg);
    }

    .s2 {
        width: r(12);
        height: r(3);
        background-color: #fff;
        position: absolute;
        bottom: r(10);
        left: 50%;
        transform-origin: right center;
        transform: translateX(-50%) rotate(30deg);
    }

    .top_yuan {
        position: absolute;
        top: r(5);
        right: r(5);
        width: r(10);
        height: r(10);
        border-radius: 50%;
        box-sizing: border-box;
        border: r(3) solid #fff;
    }

    .btm_yuan {
        position: absolute;
        bottom: r(5);
        right: r(5);
        width: r(10);
        height: r(10);
        border-radius: 50%;
        box-sizing: border-box;
        border: r(3) solid #fff;
    }

    .lef_yuan {
        position: absolute;
        top: 50%;
        left: r(5);
        width: r(14);
        height: r(14);
        border-radius: 50%;
        box-sizing: border-box;
        border: r(3) solid #fff;
        transform: translateY(-50%);
    }
}

.video_messge {
    width: r(40);
    height: r(40);
    border-radius: 50%;
    box-sizing: border-box;
    border: r(3) solid #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;

    div {
        width: r(5);
        height: r(5);
        background-color: #fff;
        border-radius: 50%;
    }
}

.video_love {
    position: relative;
    width: r(40);
    height: r(40);

    .aixin {
        position: absolute;
        left: 65%;
        top: 30%;
        transform: rotate(-45deg) translate(-50%, -50%);
        background-color: #fff;
        width: r(24);
        height: r(24);
    }
}

.aixin::after {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    background-color: #fff;
    top: -50%;
    left: 0;
}

.aixin::before {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    background-color: #fff;
    right: -50%;
    top: 0;
}


.toux {
    width: r(40);
    height: r(40);

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid #fff;
    }
}

.video_search_content {
    position: absolute;
    right: r(25);
    top: r(25);
    z-index: 10;
    width: r(24);
    height: r(24);

    .video_search_yaun {
        position: absolute;
        top: 0;
        left: 0;
        width: r(18);
        height: r(18);
        border: r(2) solid #eee;
        border-radius: 50%;
    }

    .video_search_shu {
        height: r(2);
        width: 50%;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #eee;
        transform-origin: bottom right;
        transform: rotate(45deg);
    }
}
</style>